<template>
  <div class="messageList same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>通知消息</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <!-- <button class="same-search-btns" @click="returnBack">返回</button>	  -->
        </div>
      </div>
    </div>
    <div class="informContent">
      <div class="list">
        <span class="otherSize">通知消息</span>
      </div>
    </div>
    <div class="informContent">
      <div class="list" v-for="i in tableData3" @click='jumpDetail(i.id)' :class=" i.status ? 'read' : '' ">
        <span>{{i.title}}</span>
        <span>{{i.ctime}}</span>
      </div>
      <span v-if="tableData3.length<=0" class="noneshow">暂无数据......</span>
    </div>
    <div class="paginShow">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="pageSizesList" :page-size="pageSize"
        layout="total, prev, pager, next, jumper,sizes" :total="totalDataNumber">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'messageList',
    data: function () {
      return {
        pageNo: 1,
        pageSize: 20,
        pageSizesList: [20, 30, 40],
        totalDataNumber: 0, // 数据的总数,-----
        value2: '',//结束时间
        tableData3: [],
        multipleSelection: [],
        currentPage: 1,//当前页数
      }
    },
    computed: {

    },
    // 初始化执行
    created: function () {
      var that = this;
      var page = that.pageNo;			// 当前页
      var pageSize = that.pageSize;	// 每页条数
      that.messagelist(page, pageSize); // 获取消息列表数据
    },
    inject: ['reload'],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload()
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      jumpDetail(id) {
        this.$router.push({ path: '/messageDetail', query: { id: id } })
      },
      //每页
      handleSizeChange(val) {
        var that = this;
        var page = 1;
        var pageSize = val;
        that.messagelist(page, pageSize);
      },
      //分页
      handleCurrentChange(val) {
        var pageSize = this.pageSize;
        var page = val;
        that.messagelist(page, pageSize);
      },
      // 获取消息列表数据
      messagelist: function (page, pageSize) {
        var that = this;
        // ajax请求
        that.$post({
          url: 'Partner/Message/messageList',
          data: { page: page, pageSize: pageSize },
          success: (data) => {
            if (data.code == 1000) {
              that.tableData3 = data.data.data;
              that.totalDataNumber = Number(data.data.count);  // 总的数据
            }
          }
        })
      },
    },
    mounted() {

    }
  }
</script>
<style>
  .messageList {
    width: 100%;
    height: 100%;
    background: #F2F3F3;
  }

  .messageList .informContent {
    width: 100%;
  }

  .messageList .informContent .list {
    cursor: pointer;
    margin: 15px 40px;
    font-size: 14px;
    color: #606060;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .list .otherSize {
    color: #000;
    font-weight: bold;
  }

  .paginShow {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
  }

  .read {
    color: #cccccc !important;
  }

  /*暂无数据*/
  .noneshow {
    padding: 20px 0px;
    background: #fff;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
</style>